<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <!-- 头部内容 -->
      <div class="top-content">
        <div class="top-configuration" @click="handleConfiguration">表头配置</div>
        <div class="top-name">基地调拨单</div>
        <div class="top-stock" @click="goRecord">基地调拨记录</div>
      </div>
      <div class="btns">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="form">
          <el-form-item label="">
            <el-cascader
              v-model="searchForm.companyId"
              placeholder="请选择公司名称"
              :options="companyArray"
              :popper-append-to-body="false"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childList',
              }"
              @change="changeTreeItem"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" :popper-append-to-body="false" clearable @change="baseChange">
              <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.carNumber" placeholder="请选择车辆" clearable :popper-append-to-body="false" @change="onSubmit">
              <el-option v-for="item in carsArray" :key="item.id" :label="item.carNumber" :value="item.carNumber"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form>
        <el-button class="el-icon-s-home" @click="back()"></el-button>
      </div>
      <!-- 底部内容 -->
      <div class="bottom-content">
        <div class="auto-box">
          <div class="item" v-for="(item, index) in tableData" :key="index" @click="handleOut(item, index)" :style="activeIndexO == index ? 'background: #FFD953;' : ''">
            {{ item.carNumber }}
          </div>
        </div>
      </div>
    </div>
    <Configuration :baseId="baseId" :configurationIsDialog="configurationIsDialog"></Configuration>
    <AllotDetail :companyId="companyId" :baseId="baseId" :detailId="detailId" :detailStatus="detailStatus" :detailIsDialog="detailIsDialog"></AllotDetail>
  </div>
</template>

<script>
import { isFullscreen } from "@/utils/fullscreen";
import AllotDetail from "./components/allotDetail.vue";
import Configuration from "./components/configuration.vue";
import { getSysCompanyBases } from "@/api/system";
import { getCompanyInfoTree } from "@/api/company";
import { getObjFishponds } from "@/api/fishpond";
import { getObjCars, getObjCarList } from "@/api/breeding";
export default {
  components: {
    AllotDetail,
    Configuration,
  },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10000,
        companyId: "",
        baseId: "",
        carNumber: "",
      },
      companyArray: [], // 公司集合
      baseArray: [], // 基地集合
      companyId: "", // 公司id
      baseId: "", // 基地id
      tableData: [],
      activeIndexO: -1, //用于改变鱼池的颜色
      detailId: "", //详情rowid
      detailStatus: "deatail",
      detailIsDialog: false, //详情审核页面状态
      configurationIsDialog: false,
      fishpondArray: [],
      carsArray: [], // 车辆集合
    };
  },
  mounted() {
   

    this.userType = Number(window.localStorage.getItem("userType"));
    this.searchForm.userType = this.userType;
    this.getCompanyInfoTree();
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/workbench/workbench`,
      });
    },
    // 查询
    onSubmit() {
      this.getList();
    },
    // 重置
    resetForm() {
      this.searchForm.carNumber = "";

      this.getList();
    },
    // 查询列表
    getList() {
      getObjCarList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return;
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: "总公司",
            parentId: 0,
          },
        ];
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data;
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id;
              this.companyId = this.searchForm.companyId + "";
              this.getSysCompanyBases();
            }
          }
        });
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1];
        this.companyId = val[val.length - 1] + "";
      } else {
        this.searchForm.companyId = "";
        this.companyId = "";
      }

      this.searchForm.baseId = "";
      this.baseId = "";
      this.baseArray = [];

      // 获取基地列表
      this.getSysCompanyBases();
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === "" || this.searchForm.companyId == null) {
        return;
      }
      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data;
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id;
            this.baseId = this.searchForm.baseId + "";

            this.getObjCars();
            this.getList();
          }
        }
      });
    },
    // 基地下拉切换
    baseChange(val) {
      if (val) {
        this.searchForm.baseId = val;
        this.baseId = val + "";
      } else {
        this.searchForm.baseId = "";
        this.baseId = "";
      }

      this.getList();
    },
    // 获取鱼池列表
    getObjFishponds() {
      if (this.searchForm.baseId === "" || this.searchForm.baseId == null) {
        return;
      }

      getObjFishponds({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.fishpondArray = res.data;
        }
      });
    },
    //  点击鱼池信息后改变颜色
    handleOut(item, index) {
      this.activeIndexO = index;
      this.detailId = item.id + "";
      this.detailIsDialog = true;
    },
    // 表头配置
    handleConfiguration() {
      this.configurationIsDialog = true;
    },
    // 表头配置关闭
    closeConfiguration() {
      this.configurationIsDialog = false;
    },
    // 弹窗关闭
    closeAddEdit() {
      this.detailIsDialog = false;
    },
    // 跳转到入库记录
    goRecord() {
      this.$router.push({
        path: "/allot/record",
        query: {
          companyId: this.searchForm.companyId,
          baseId: this.searchForm.baseId,
          type: this.$route.query.type,
        },
      });
    },
    // 获取车辆列表
    getObjCars() {
      getObjCars().then((res) => {
        if (res.code == 200) {
          this.carsArray = res.data;
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.btns {
  width: 95%;
  height: 3.5rem;
  margin-bottom: 2rem;
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border: 1px solid red;
  /deep/.el-button {
    font-size: 2.5rem;
  }
  .form {
    /deep/.el-form-item__content {
      width: 22rem;
    }
    /deep/.el-form-item {
      margin-bottom: 0;
    }
    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
      height: 4.5rem;
      width: 22rem;
      font-size: 1.86rem;
    }
    ::v-deep .el-select-dropdown__empty {
      padding: 0.814286rem 3.3rem;
      font-size: 2rem;
    }
    ::v-deep .el-select-dropdown__list {
      .el-select-dropdown__item {
        font-size: 2rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
      }
    }
  }
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .top-content {
      width: 95%;
      height: 5rem;
      margin-bottom: 4rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: "宋体";
      position: relative;
      // border: 1px solid red;
      position: relative;

      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }
      .top-configuration {
        width: fit-content;
        height: 3rem;
        position: absolute;
        left: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
      .top-stock {
        width: fit-content;
        height: 3rem;
        position: absolute;
        right: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
    }

    .bottom-content {
      width: 95%;
      display: flex;
      justify-content: space-between;
      height: 55.57rem;
      background: #ffffff;
      border-radius: 0.43rem;
      display: flex;
      position: relative;
      .auto-box {
        width: 98%;
        height: fit-content;
        margin-top: 3rem;
        max-height: 88%;
        display: flex;
        flex-flow: wrap;
        overflow: auto;

        .item {
          width: 10.5rem;
          height: 10.5rem;
          line-height: 10.5rem;
          margin-left: 4.6rem;
          margin-bottom: 3.6rem;
          color: #333333;
          font-size: 1.86rem;
          border-radius: 50%;
          border: 0.25rem solid #979797;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
